<template>
  <view class="index">
    <!-- 搜索框 -->
    <ugoSearch></ugoSearch>
    <!-- 轮播图 -->
    <u-swiper
      :list="imgList"
      keyName="image_src"
      @change="(e) => (current = e.current)"
      circular
      height="340rpx"
    >
      <view slot="indicator" class="indicator">
        <view
          class="indicator__dot"
          v-for="(item, index) in imgList"
          :key="index"
          :class="[index === current && 'indicator__dot--active']"
        >
        </view>
      </view>
    </u-swiper>

    <!-- 导航 -->
    <view class="nav">
      <navigator v-for="item in navs" :key="item.name">
        <u--image :src="item.image_src" mode="widthFix" width="100%"></u--image>
      </navigator>
    </view>

    <!-- 楼层 -->
    <view class="floor">
      <view
        class="floor-group"
        v-for="item1 in floorList"
        :key="item1.floor_title.name"
      >
        <!-- 4.1 标题 -->
        <view class="floor-group-title">
          <u--image
            width="100%"
            mode="widthFix"
            :src="item1.floor_title.image_src"
          ></u--image>
        </view>
        <!-- 4.2 内容 -->
        <view class="floor-group-content">
          <navigator
            v-for="(item2, index2) in item1.product_list"
            :key="item2.name"
          >
            <u--image
              v-if="index2 === 0"
              width="100%"
              mode="widthFix"
              :src="item2.image_src"
            ></u--image>

            <u--image
              v-else
              width="100%"
              height="188rpx"
              mode="scaleToFill"
              :src="item2.image_src"
            ></u--image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgList: [],
      current: 0,
      navs: [],
      floorList: [],
    };
  },
  async onLoad() {
    Promise.all([this.getImgList(), this.getNavs(), this.getFloorList()]);
  },
  methods: {
    async getImgList() {
      const { message: imgList } = await uni.$u.http.get("/home/swiperdata");
      this.imgList = imgList;
    },
    async getNavs() {
      const { message: navs } = await uni.$u.http.get("/home/catitems");
      this.navs = navs;
    },
    async getFloorList() {
      const { message: floorList } = await uni.$u.http.get("/home/floordata");
      this.floorList = floorList;
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  padding-top: 84rpx;
}
.indicator {
  @include flex(row);
  justify-content: center;

  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 5px;
    transition: background-color 0.3s;

    &--active {
      background-color: #ffffff;
    }
  }
}
.nav {
  display: flex;
  navigator {
    flex: 1;
    padding: 20rpx;
  }
}
.floor {
  .floor-group-content {
    // 清除浮动
    overflow: hidden;
    navigator {
      width: 232rpx;
      margin-left: 15rpx;
      float: left;

      /* 
      几张图片的大小不一致 无法直接使用图片高度自适应的设置 
      得要靠自己去计算图片的高度
      1 第一张图片的高度 当时可以使用高度自适应。。
      2 后四张图片的高度，手动去计算，高度等于第一张图片高度的一半即可！！ 
      
       */

      /* 后四个导航标签 */
      // &:nth-last-child(-n + 4) {
      //   image {
      //     height: 188rpx;
      //   }
      // }

      &:nth-last-child(-n + 2) {
        // 后两个导航标签
        margin-top: 15rpx;
      }
    }
  }
}
</style>